<template>
    <el-dialog :class="!visible && 'invisible'"
        class="application-preview"
        :visible.sync="visible"
        width="80%">
        <div class="w-4/5 m-auto py-8">
        <div class="application-edit-tab flex items-start my-2" v-if="detail.type">
            <div @click="tabChange(0)" :class="'application-edit-tabitem flex-1 text-grey-darker text-center px-4 py-4'+ (type? '':' active')">
                应用预览
            </div>
            <div @click="tabChange(1)" :class="'application-edit-tabitem flex-1 text-grey-darker text-center px-4 py-4'+ (type ? ' active' :'')">
                关联产品
            </div>
        </div>
        <div v-if="!type">
            <div class="code font-light" v-if="detail.code">应用编号: {{ detail.code }}</div>
            <header>{{ detail.title }}</header>
            <section class="author my-2">
                <span>{{ detail.hide ? '匿名发布' : detail.creator }}</span>
            </section>

            <div class="popular w-full flex justify-between items-end">
                <div>
                    <i class="iconfont icon-eye"></i>
                    <span>{{ detail.statistics ? detail.statistics.pgNum : 0 }}</span>
                    <i class="iconfont icon-star"></i>
                    <span>{{ detail.statistics ? detail.statistics.favNum : 0 }}</span>
                    <i class="iconfont icon-share"></i>
                    <span>{{ detail.statistics ? detail.statistics.shaNum : 0 }}</span>
                </div>
                <time class="font-light">{{ detail.createTime | formatDate('yy-mm-ss hh:mm:ss') }}</time>
            </div>

            <img :src="detail.img" class="w-full mt-4" v-if="detail.img">
            <div class="leading-loose mt-2 html" v-html="html"></div>

            <div class="tags mt-2" v-if="(labels && labels.length) || (categoryText && categoryText.length)">
                <template v-if="labels && labels.length">
                    <span v-for="item in labels">{{ item }}</span>
                </template>

                <template v-if="categoryText && categoryText.length">
                    <span v-for="value in categoryText">{{ value }}</span>
                </template>
            </div>

            
        </div>
        <div class="mt-4" v-else>
            <el-table
            :data="enterPro"
            height="500"
        >
            <el-table-column label="品牌" align="center" >
                <template slot-scope="{row}">
                    <span class="text-grey font-light">{{ row.manufactureName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="类目" align="center" >
                <template slot-scope="{row}">
                    <span class="text-grey font-light">{{ row.cats&&row.cats.map(item => item.cnname).join('-') || '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="牌号" align="center">
                <template slot-scope="{row}">
                    <span class="text-grey font-light">{{ row.productName  }}</span>
                </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center">
                <template slot-scope="{row}">
                    <span class="text-grey font-light">{{ row.name  }}</span>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <div class="mt-4 pt-4 text-center">
            <el-button @click="close">点击关闭</el-button>
        </div>
        </div>
    </el-dialog>
</template>

<script>
    import {Dialog} from 'element-ui';
    export default {
        components: {
            ElDialog: Dialog
        },
        props: ['source', 'categoryText', 'labels'],
        data() {
            return {
                visible: false,
                detail: this.source || '',
                html: '',
                type:0,
                enterPro:[]
            };
        },
        computed: {},
        watch: {},
        methods: {
            open(data) {
                this.detail = data;

                let html = data.html.match(/<style.+<\/style>/g);
                if (html && html.length) {
                    this.html = data.html.replace(/<style.+<\/style>/g, '');
                } else {
                    this.html = data.html;
                }

                if(this.detail.type){
                    let _params = {
                        appid:this.detail.id
                    }
                    API['post']('/products/search',_params).then(res => {
                        console.log(res)
                        this.enterPro = res.rows
                    }).catch(err => {
                        Ele.$message.error('操作失败！');
                    })
                    .finally(() => {
                        //this.dialogVisible = false;
                    });
                }

                this.visible = true;
            },
            close() {
                this.type = 0
                this.visible = false;
            },
            tabChange(index){
                this.type = index
            }
            
        }
    };
</script>

<style lang="scss">
    .application-preview {
        .el-dialog {
            margin-top: 10vh;
            height: 80vh;
            overflow-y: scroll;
            font-size: 16px;
        }
        .el-dialog__body {
            padding-top: 0;
            font-size: 16px;
        }
        .el-dialog__header {
            padding: 10px 0 0;
        }
        header {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
        }

        .application-edit {
   
            &-tab{
                
            }

            &-tabitem{
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;
                border-bottom: 2px solid #efefef;
                color: #ccc;
            }

            &-tabitem.active{
                color: #02a7fb;
                border-bottom: 4px solid #02a7fb;
            }
        }
        .author {
            color: #666
        }
        .code {
            color: #999;
        }
        .tags {
            span {
                display: inline-block;
                color: #02A7FB;
                font-size: 14px;
                padding: 5px 10px;
                margin-right: 10px;
                border-radius: 4px;
                border: 1px solid #02A7FB;
            }
        }

        .html {
            img {
                width: 100%;
                height: auto;
            }

            ul, p {
                line-height: 1.7;
                margin: 0 0 20px;
            }
        }
    }
</style>
